<template>
  <div class="bg-ffefe6 courseShareholder">
    <div class="bt-wrapper">
      <div class="c-pt24">
        <div class="minh800">
          <div class="c-ph24">
            <div class="c-flex-row c-pv20 c-bg-white c-mb20 c-br12 c-ph20" v-for="(item,index) in dataList" :key="index" @click="clickDetail(item)">
              <div class="c-text-hidden c-flex-shrink0 c-p" :class="item.prodType == cfrom.ebooks ? 'c-ww160 c-maxh240' : item.prodType == cfrom.activity ? 'c-ww180 c-maxh90' : 'c-ww180 c-maxh120'">
                <vip-custom-img :cover="item.avatar" :imgClass="'imgCloseBig c-br12 c-maxh120'" :fontClass="{
                  boxStyle: 'c-pv20 c-pl12',
                  name: 'c-fs24 c-text-ellipsis1 c-fw-b',
                  duration: 'c-fs18'}" :content="{name: item.name, duration: item.duration, durationType: item.durationType}" v-if="item.prodType == cfrom.vip || item.prodType == cfrom.svip" />
                <img :src="$addXossFilter(item.avatar.replace(/^\s*|\s*$/g, ''), require('@/assets/defult270.png'))" v-else class="c-w100 c-h c-br12"/>
                <div class="c-br8 c-hh28 c-lh30 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8">{{prodMapType[item.prodType]}}</div>
              </div>
              <div class="c-pl20 c-flex-column c-justify-sb c-flex-grow1 c-w0">
                <span class="c-fs26 c-text-ellipsis2 c-fw-b">{{item.name}}</span>
                <span class="c-fc-gray c-fs22 c-pt10">{{'￥' | iosPriceFilter}}{{item.prodPrice}}</span>
                <div class="c-flex-row c-justify-sb c-aligni-center c-pt2">
                  <span class="c-fc-xmlred c-fs26"><span class="c-fs20">预计收益:</span>{{'￥' | iosPriceFilter}}{{item.ratioType == 1 ? (Number(item.prodPrice) * Number(item.commission) / 100).toFixed(2) : item.ratioType == 4 ? item.commission : ''}}</span>
                  <div class="c-flex-row c-flex-center c-hh48 c-fc-white c-ph36 c-fs22 c-br32 c-ws-n bgColor" @click.stop="goSpreadInvite(index, item.prodType)">推广</div>
                </div>
              </div>
            </div>
            <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (dataList && dataList.length > 0)" :noData="dataList.length == 0" :noDataText="'暂无数据'"></loading-status-tem>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { goDetails } from "@/utils/goDetails.js";
import { utilJs } from "@/utils/common.js"
export default {
  name: 'ChainSpreadMoney',
  components: {
    loadingStatusTem,
    VipCustomImg
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      page: 1,
      is_page: false,
      limit: 10,
      dataList: [],
      isLoading: false,
      cfrom: global.ckFrom,
      prodMapType: global.prodMapType
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    clickDetail(item) {
      if (item.prodType == this.cfrom.svip) {
        this.$routerGo(this, "push", { path: "/member/vip/vipDetail", query: { type: global.ckFrom.svip } });
      } else if (item.prodType == this.cfrom.vip) {
        this.$routerGo(this, "push", { path: "/member/vip/vipDetail" });
      } else {
        let courseType = item.prodType == 5 ? item.courseType : '';
        goDetails(this, item.prodType, item.prodId, '', courseType);
      }
    },
    goSpreadInvite(index, prodType) {
      let courseType = prodType == 5 ? this.dataList[index].courseType : '';
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: { cId: this.dataList[index].prodId, extId: this.dataList[index].prodId, ckFrom: prodType, promote: 1, courseType: courseType, fromChain: 'true' }
      });
    },
    getList() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}chainProds/getChainProdList?page=${this.page}&limit=${this.limit}`,
        res => {
          if (res.userType == null || res.userType == 1) {
            this.$routerGo(this, "replace", { path: "/" });
            return
          }
          if (this.page == 1) {
            this.dataList = res.data && res.data.data ? res.data.data : [];
          } else {
            this.dataList = this.dataList.concat(res.data.data);
          }
          this.page = res.data.data && (res.data.data.length >= this.limit) ? (this.page + 1) : this.page;
          this.is_page = res.data.data && (res.data.data.length >= this.limit) ? true : false;
          this.isLoading = false;
        },
        failRes => {
          this.isLoading = false;
        }
      );
    },
     windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getList();
        }
      });
    },
    //分享
    wechatShare: function () {
      // let title = '推广赚钱';
      // let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      // utilJs.wechatConfig(shareUrl, title, "", "", function () { });
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      // let title = '推广赚钱';
      // let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      // utilJs.appShareTrue(title, "", shareUrl, "");
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    if (utilJs.checkNeedInitData(this.dataList, this.page)) {
      this.page = 1;
      this.is_page = false;
      this.limit = 10;
      this.dataList = [];
      this.getList();
    }
    setDocumentTitle("推广");// eslint-disable-line
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.courseShareholder {
  background: url('../../../../public/i/wap/coupon/cousetg.png') no-repeat;
  background-size: 100% auto;
  padding-top: 7.25rem;
}
.bt-wrapper {
  border-radius: .7rem .7rem 0 0;
}
.bg-ffefe6, .bt-wrapper {
  background-color: #FFEFE6;
}
.minh800 {
  min-height: 20rem;
}
.bgColor {
  background-image: linear-gradient(90deg, #FF300C 0%, #ff300cb3 100%);
}
</style>
